<template>
	<view class="content">
		<view class="" style="position: fixed;z-index: 999;width: 100%;height: 100rpx;background-color: #fff;top: 0;padding: 30rpx;">
			<!-- <u-search placeholder="搜索" v-model="keyword" @search="search" :showAction="false"></u-search> -->
			<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false" v-model="keyword">
			</u-search>
			<!-- <view class="section-2">
				<view class="tag-list">
					<u-tag shape="circle" v-for="(item2,index2) in hour_list" :key="index2" :text="item2.hour_unit" type="warning"
						:bgColor="
						  data_name.indexOf(item2) > -1
						    ? 'rgba(47, 117, 250, 0.05)'
						    : '#EFEFEF'
						" :borderColor="
						  data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
						" :color="data_name.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="data_specss(item2,index2)" />
			
				</view>
			</view> -->
		</view>
		<view style="margin-top: 130rpx;font-size: 30rpx;padding: 0rpx 30rpx 0rpx 30rpx;">
			转移记录
		</view>
		<!-- <view class="list_2 flex-col">
			<view class="list-items_2 flex-col" v-for="(item, index) in loopData1" :key="index">
				<view class="box_6 flex-row justify-between">
					<text class="text_9">{{item.lanhutext0}}</text>
					<view class="text-wrapper_4">
						<text class="text_10">{{item.lanhutext1}}</text>
						<text class="text_11">{{item.lanhutext2}}</text>
					</view>
				</view>
				<view class="text-wrapper_5 flex-row justify-between">
					<text class="text_12" >{{item.lanhutext3}}</text>
					<text class="text_13" :style="{ color: item.lanhufontColor4 }">{{item.lanhutext4}}</text>
				</view>
				<view class="box_7 flex-col"></view>
				<view v-if="item.slot2 === 2" class="text-wrapper_6 flex-row justify-between">
					<text class="text_14">手续费：¥6</text>
					<text class="text_15">2020/2/12 11:02:51</text>
				</view>
				<text v-if="item.slot1 === 1" class="text_16">
					2020/2/13 19:21:05
				</text>
			</view>
		</view> -->
		<view class="list_2 flex-col">
			<view class="list-items_2 flex-col" v-for="(item, index) in loopData1" :key="index">
				<view class="box_6 flex-row justify-between">
					<text class="text_9">{{item.content}}</text>
					<view class="text-wrapper_4">
						<text class="text_10" v-if="type == 3">{{item.to_money}}元</text>
						<text class="text_10" v-if="type == 4 || type == 1">{{item.to_times}}次</text>
						<!-- <text class="text_11">.00</text> -->
					</view>
				</view>
				<view class="text-wrapper_5 flex-row justify-between">
					<text class="text_12" >{{item.to_user}}</text>
					<text class="text_13" style="color: rgba(23,194,1,1);">转移成功</text>
				</view>
				<view class="box_7 flex-col"></view>
				<view  class="text-wrapper_6 flex-row justify-between">
					<text class="text_14">手续费：¥0</text>
					<text class="text_15">{{item.create_at}}</text>
				</view>
				<text v-if="item.slot1 === 1" class="text_16">
					{{item.create_at}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	const person = require("@/api/personal/index.js");
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				keyword: '',
				data_name: [],
				hour_list: [{
						id: 1,
						hour_unit: "本周",
					},
					{
						id: 2,
						hour_unit: "本月",
					},
					{
						id: 3,
						hour_unit: "本年",
					},
					{
						id: 4,
						hour_unit: "转到我的卡",
					},
					{
						id: 5,
						hour_unit: "转到其他用户",
					}
				],
				loopData1: [{
						lanhutext0: '转给：我',
						lanhutext1: '-60.',
						lanhutext2: '00',
						lanhutext3: '1000元储值卡[2235;4856]',
						lanhutext4: '转移成功',
						lanhufontColor4: 'rgba(23,194,1,1)',
						slot1: 1,
					},
					{
						lanhutext0: '转给：15965544782',
						lanhutext1: '-60.',
						lanhutext2: '00',
						lanhutext3: '李有田',
						lanhutext4: '审核中',
						lanhufontColor4: 'rgba(255,191,18,1)',
						slot2: 2,
					},
				],
				id:"",
				listQuery: { //分页
					limit: 10,
					page: 1,
				},
				totalPage: "",
				type:''
			};
			
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.type = options.type
			this.shift_record()
		},
		methods: {
			data_specss(item2, index2) {
				console.log(item2, index2)
				this.data_name = []
				this.namedata = item2.hour_num
				let data_name = []
				this.hour_list.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.hour_list.map((item, index) => {
					item.checked = index === index2 ? true : false
				})

			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.page) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.shift_record()
			},
			// 转移记录
			async shift_record() {
				let that = this;
				if (this.listQuery.page === 1) that.loopData1 = [];
				let params = {
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					id:this.id,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
					phone:this.keyword
				}
				let res = await index.shift_record(params)
				if (res.code === 1) {
					// this.loopData1 = res.data.data
					that.loopData1 = that.loopData1.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},

			// 搜索字
			search(val) {
				console.log(val)
				this.keyword = val
				this.listQuery.page = 1;
				this.loopData1 = [];
				this.shift_record()
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");
	@import url("@/static/css/common/common.scss");
	.content {
		
		.list_2 {
			width: 690rpx;
			height: 410rpx;
			justify-content: space-between;
			// margin-top: 30rpx;
			padding: 30rpx;
			// margin: 30rpx 0 354rpx 30rpx;
		
			.list-items_2 {
				box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
				background-color: rgba(255, 255, 255, 1);
				border-radius: 10px;
				width: 690rpx;
				height: 195rpx;
				border: 1px solid rgba(237, 235, 235, 1);
				margin-bottom: 20rpx;
		
				.box_6 {
					width: 628rpx;
					height: 27rpx;
					margin: 30rpx 0 0 31rpx;
		
					.text_9 {
						width: 277rpx;
						height: 27rpx;
						overflow-wrap: break-word;
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 46rpx;
					}
		
					.text-wrapper_4 {
						width: 76rpx;
						height: 21rpx;
						overflow-wrap: break-word;
						font-size: 0;
						font-family: DIN-Bold;
						font-weight: 700;
						text-align: right;
						white-space: nowrap;
						line-height: 46rpx;
						margin-top: 1rpx;
		
						.text_10 {
							width: 76rpx;
							height: 21rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 46rpx;
						}
		
						.text_11 {
							width: 76rpx;
							height: 21rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 22rpx;
							font-family: DIN-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 46rpx;
						}
					}
				}
		
				.text-wrapper_5 {
					width: 627rpx;
					height: 22rpx;
					margin: 20rpx 0 0 32rpx;
		
					.text_12 {
						width: 266rpx;
						height: 22rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 22rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 46rpx;
					}
		
					.text_13 {
						width: 87rpx;
						height: 22rpx;
						overflow-wrap: break-word;
						font-size: 22rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: right;
						white-space: nowrap;
						line-height: 46rpx;
					}
				}
		
				.box_7 {
					background-color: rgba(255, 255, 255, 1);
					width: 690rpx;
					height: 2rpx;
					border: 1px solid rgba(237, 235, 235, 1);
					margin-top: 31rpx;
				}
		
				.text-wrapper_6 {
					width: 96%;
					height: 24rpx;
					margin: 20rpx 20rpx 20rpx 31rpx;
		
					.text_14 {
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: left;
						white-space: nowrap;
						line-height: 23rpx;
					}
		
					.text_15 {
						height: 23rpx;
						overflow-wrap: break-word;
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						font-family: PingFang-SC-Medium;
						font-weight: 500;
						text-align: right;
						white-space: nowrap;
						line-height: 23rpx;
						// margin: 20rpx 20rpx 20rpx 0;
						margin-right: 20rpx;
					}
				}
		
				.text_16 {
					height: 23rpx;
					overflow-wrap: break-word;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-family: PingFang-SC-Medium;
					font-weight: 500;
					text-align: right;
					white-space: nowrap;
					line-height: 23rpx;
					margin: 20rpx 20rpx 20rpx 0;
				}
			}
		}

		.section-2 {
			margin-top: 50rpx;

			.top-menu-list {
				display: flex;
				flex-wrap: wrap;

				.top-menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					// margin-top: 10rpx;
					padding: 0px 30rpx;
					box-sizing: border-box;
					font-size: 25rpx;

					.add_na {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;
						// margin-top: 30rpx;
						padding: 0px 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.menu-image {
							width: 100rpx;
							height: 100rpx;
							// border-radius: 37rpx;
							// background: rgb(250, 237, 234);
							// background: linear-gradient(45deg,
							// 		rgba(250, 237, 234, 1) 0%,
							// 		rgba(246, 227, 216, 1) 77%);
							background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
							background-size: 100% 100%;
							// position: absolute;
							// top: 0;
							// right: 0;
							// z-index: 999;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.menu-image-no-checked {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.no-checked-text {
							white-space: nowrap;
						}

						.checked-text {
							margin-top: 20rpx;
							white-space: nowrap;
							font-weight: bold;
						}
					}
				}
			}

			.sub-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}



			.tag-list {
				display: flex;
				flex-wrap: wrap;

				/deep/.u-tag {
					margin-left: 10rpx;
					margin-bottom: 30rpx;
					font-size: 20rpx;
				}

				// .tag{
				// 	background: #EFEFEF;
				// 	border-radius: 3px;
				// 	font-size: 24rpx;
				// 	font-weight: 500;
				// 	color: #FFFFFF;
				// 	padding: 7rpx 20rpx;
				// 	margin-right: 20rpx;
				// 	margin-bottom: 20rpx;
				// }

			}
		}
	}
</style>